<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item>
        <el-button :icon="Search" @click="initList()" />
        <el-button
          type="primary"
          @click="editFormVisible = true"
          plain
          style="margin-left: 5px"
        >
          + 新增
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #state="{ row }">
          {{ getTranslate(stateList, "value", row.state, "label") }}
        </template>
        <template #operation="{ row }">
          <el-button
            size="small"
            :icon="Edit"
            plain
            type="warning"
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            :icon="Delete"
            type="danger"
            plain
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>
    <EditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      :parent-menu-option="tableData.data"
      @submit="initList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import EditForm from "./components/EditForm.vue";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import {
  selectVideoTypeList,
  deleteVideo,
  delVideType,
} from "@/api/videoManage.ts";
import { getTranslate } from "@/util";

let rowData: any;
const editFormVisible = ref<boolean>(false);
const tableRef = ref();
const stateList = [
  { value: "1", label: "启用" },
  { value: "2", label: "禁用" },
];

const tableData = reactive({
  columns: [
    { label: "状态", prop: "state", width: 150, template: true },
    { label: "分类名称", prop: "typeName", width: 150 },
    { label: "排序", prop: "sort", width: 80 },
    { label: "操作", prop: "operation", template: true, width: 180 },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList() {
  tableData.loading = true;
  const { data, msg, success } = await selectVideoTypeList();
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data;
}

async function edit(row: any) {
  rowData = { ...row };
  editFormVisible.value = true;
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    tableData.loading = true;
    const { success, msg } = await delVideType({ id: row?.id });
    if (!success) {
      tableData.loading = false;
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList();
  });
}

onMounted(async () => {
  await initList();
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
